<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>layui</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
        <link rel="stylesheet" href="../../css/public.css" media="all">
        <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
        <style>
            body {
                background-color: #ffffff;
            }
        </style>
    </head>
    <body>
        <div>

            <form class="layui-form"  lay-filter="example" onsubmit="return false;" action="">
                <input type="hidden" name="id"     placeholder="请输入id" autocomplete="off" class="layui-input">
                <input type="hidden" name="pid"    placeholder="请输入pid" autocomplete="off" class="layui-input">
                <div class="layui-form-item">
                    <label class="layui-form-label">上级目录</label>
                    <div class="layui-input-block">
                        <input type="text" name="pidname" disabled   autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required  lay-verify="required"   placeholder="请输入菜单名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="href"  placeholder="请输入菜单地址" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">打开方式</label>
                    <div class="layui-input-block">
                        <select name="target" lay-verify="required">
                            <option value=""></option>
                            <option value="_self">tab</option>
                            <option value="_blank">新窗口</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图标</label>
                    <div class="layui-input-block">
                        <input type="text" id="iconPicker1" name="icon" value="fa-arrows" lay-filter="iconPicker2" class="hide">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">排序码</label>
                    <div class="layui-input-block">
                        <input type="text" name="orderNumber" required  lay-verify="required" placeholder="请输入排序码" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn"  lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>

        </div>
        <script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
        <script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
        <script src="/js/jquery-1.12.1.min.js"></script>
        <script src="/js/common.js" charset="utf-8"></script>
        <script>
            layui.use(['form','iconPickerFa'], function () {
                var form = layui.form,
                    layer = layui.layer,
                    iconPickerFa = layui.iconPickerFa,
                    $ = layui.$;

                var url = decodeURI(window.location.href);
                var argsIndex = url.split("?obj=");
                var arg = argsIndex[1];

                let obj=api.getMenuModel(arg);
                obj=obj.data;
                //表单赋值
                form.val('example',{
                    pidname:obj.title,
                    pid:obj.pid,
                    id:obj.id,
                    title:obj.title,
                    href:obj.href,
                    target:obj.target,
                    icon:obj.icon,
                    orderNumber:obj.orderNumber
                });


                iconPickerFa.render({
                    // 选择器，推荐使用input
                    elem: '#iconPicker1',
                    // fa 图标接口
                    url: "../../lib/font-awesome-4.7.0/less/variables.less",
                    // 是否开启搜索：true/false
                    search: true,
                    // 是否开启分页
                    page: true,
                    // 每页显示数量，默认12
                    limit: 12,
                    // 点击回调
                    click: function (data) {
                        console.log(data);
                    },
                    // 渲染成功后的回调
                    success: function (d) {
                        console.log(d);
                    }
                });

                //监听提交
                form.on('submit(formDemo)', function (data) {
                    let obj=api.saveMenuModel(data.field)
                    layer.msg(obj.msg)
                    if(obj.code===0){
                        var iframeIndex = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(iframeIndex);
                    }else {
                        return false;
                    }
                });

            });
        </script>
    </body>
</html>